<script lang="ts">
import * as echarts from "echarts"
import { watch } from "vue"
export default {
  name: "echarts",
  data() {
    return {}
  },
  props: {
    zationData: {
      type: Array,
    },
  },
  mounted() {
    this.echartsInit()
    watch(
      () => this.zationData,
      (newValue, oldValue) => {
        this.echartsInit()
      },
      {
        deep: true,
      }
    )
  },
  methods: {
    echartsInit() {
      //使用时只需要把setOption里的对象换成echarts中的options或者自己的参数即可
      echarts.init(document.getElementById("main")).setOption({
        title: {
          text: "曲线数据报表",
        },
        tooltip: {
          trigger: "axis",
        },
        grid: {
          left: "3%",
          right: "4%",
          bottom: "3%",
          containLabel: true,
        },
        toolbox: {
          feature: {
            saveAsImage: {},
          },
        },
        xAxis: {
          type: "category",
          boundaryGap: false,
          data: this.zationData.find((item: any) => item.title === "日期")?.data,
        },
        yAxis: {
          type: "value",
        },
        series: [
          {
            name: "销售额",
            type: "line",
            stack: "Total",
            data: this.zationData.find((item: any) => item.title === "销售额")?.data,
          },
          {
            name: "利润额",
            type: "line",
            stack: "Total",
            data: this.zationData.find((item: any) => item.title === "利润额")?.data,
          },
          {
            name: "销售量",
            type: "line",
            stack: "Total",
            data: this.zationData.find((item: any) => item.title === "销售量")?.data,
          },
        ],
      })
    },
  },
}
</script>

<template>
  <div class="echarts_line">
    <div id="main" class="line"></div>
  </div>
</template>

<style lang="scss" scoped>
.echarts_line {
  width: 100%;
  height: 100%;

  .line {
    width: 100%;
    height: 100%;
  }
}
</style>
